<template>
  <view class="city-select-page">
    <!-- 搜索栏 -->
    <!-- <view class="search-bar">
      <input 
        type="text" 
        v-model="searchKey" 
        placeholder="城市/拼音" 
        @input="handleSearch"
      >
      <view class="cancel-btn" @click="cancelSearch">取消</view>
    </view> -->

    <!-- 当前城市 -->
    <view class="current-city">
      <text>当前: {{ currentCity }}</text>
    </view>

    <!-- 定位/最近访问 -->
    <view class="location-section">
      <text>定位/最近访问</text>
      <view class="location-item" v-if="locationCity">
        <view class="city-icon">
          <view class="dot"></view>
        </view>
        <text>{{ locationCity }}</text>
      </view>
    </view>

    <!-- 热门城市 -->
    <!-- <view class="hot-city-section">
      <text>热门城市</text>
      <view class="hot-city-list">
        <view 
          class="hot-city-item" 
          v-for="city in hotCities" 
          :key="city" 
          @click="selectCity(city)"
        >
          {{ city }}
          <view v-if="city === '广州'" class="tag">长隆</view>
        </view>
      </view>
    </view> -->

    <!-- 所有城市 -->
    <view class="all-city-section">
      <text>所有城市</text>
      <view class="city-list">
        <view 
          v-for="(group, index) in cityJson.cityList" 
          :key="index"
        >
          <text class="city-group-title">{{ group.idx }}</text>
          <view 
            class="city-item" 
            v-for="city in group.cities" 
            :key="city.id" 
            @click="selectCity(city)"
          >
            {{ city.name }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import cityJson from '@/utils/citys.json'
import{ onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { requestJsonp } from '@/utils/jsonp.js'
import { generateAdminCodes } from '@/utils/getCityCode.js';
console.log(cityJson)
// 真实城市数据（部分示例，实际需完整数据）
const currentCity = ref('天津');
const locationCity = ref('天津');
const hotCities = ref([
  '北京', '成都', '重庆', '广州', '杭州', '南京', '上海', '深圳', '天津'
]);

// 完整中国城市数据（按首字母分组，此处为示例结构）


// 搜索相关
const searchKey = ref('');

const handleSearch = () => {
  
};

const cancelSearch = () => {
  searchKey.value = '';
  
};
const cityArr = ref(["北京市", '天津市', '上海市', '重庆市'])
// 选择城市
const selectCity = (city) => {
  // 这里添加选择城市后的逻辑，比如返回给父组件
  console.log('选择城市:', city);
  // 实际使用中可通过事件抛出：emit('selectCity', city)
  // uni.n
  
  uni.$emit('city-selected', city);
	uni.navigateBack(-1)
};
	const getLocation = () => {
		console.log('11111111111111111111111111')
		const geolocation = new qq.maps.Geolocation(
			'6LEBZ-FJ6CL-VAOPZ-ECZ4O-3YJVE-ROF4G', // 替换为你的腾讯地图 API Key
			'订房H5'
		);
	
		geolocation.getLocation(
			async (position) => {
				console.log('position=============================',position)
	      
				try {
					const res = await requestJsonp('https://apis.map.qq.com/ws/geocoder/v1/', {
						key: "6LEBZ-FJ6CL-VAOPZ-ECZ4O-3YJVE-ROF4G",
						location: position.lat + ',' + position.lng,
						output: 'jsonp',
					});
					console.log('结果:', res);
					if(res.message == "Success"){
						if(cityArr.value.includes(res.result.ad_info.province) ){
							currentCity.value = res.result.ad_info.city
						}else{
							currentCity.value = res.result.ad_info.district
						}
					}
				} catch (err) {
					console.error('请求失败:', err);
				}
			},(err) => {
			  console.error('定位失败:', err);
			  // location.value.address = '定位失败';
			},
	    {
	      timeout: 10000 // 定位超时时间
	    });
	};
onLoad(()=>{
	getLocation()
})
</script>

<style scoped>
/* 样式部分与之前代码一致，保持不变 */
.city-select-page {
  padding: 20rpx;
  background-color: #fff;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.search-bar input {
  flex: 1;
  height: 80rpx;
  font-size: 28rpx;
}

.cancel-btn {
  color: #999;
  font-size: 28rpx;
  margin-left: 20rpx;
}

.current-city {
  padding: 20rpx 0;
  font-size: 32rpx;
}

.location-section {
  margin: 20rpx 0;
}

.location-section text {
  display: block;
  color: #666;
  font-size: 30rpx;
  margin-bottom: 10rpx;
}

.location-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
}

.city-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.dot {
  width: 20rpx;
  height: 20rpx;
  background-color: #ffc800;
  border-radius: 50%;
}

.hot-city-section {
  margin: 20rpx 0;
}

.hot-city-section text {
  display: block;
  color: #666;
  font-size: 30rpx;
  margin-bottom: 10rpx;
}

.hot-city-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.hot-city-item {
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
  text-align: center;
}

.tag {
  display: inline-block;
  padding: 4rpx 12rpx;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 24rpx;
  border-radius: 20rpx;
  margin-left: 10rpx;
}

.all-city-section {
  margin: 20rpx 0;
}

.all-city-section text {
  display: block;
  color: #666;
  font-size: 30rpx;
  margin-bottom: 10rpx;
}

.city-group-title {
  color: #999;
  font-size: 28rpx;
  margin: 10rpx 0;
}

.city-item {
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  font-size: 30rpx;
}
</style>